<h2> Data Master</h2>
<div id=grid></div>

<script>
                $(document).ready(function() {


                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: "<?=base_url();?>/index.php/application/showMasterData",
                                dataType: "json"
                            },
                             
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 10,
                        
                    });


                  
                    $("#grid").kendoGrid({
                    	dataSource: dataSource,
                    	sortable: {
                            mode: "single",
                           
                            allowUnsort: false
                        },
                   		filterable: true,
                        pageable: true, 
                        scrollable: false,
                        columns: [ {
                                     field: "mt_id",
                                     title: "NO:"
                                  } ,
                                  {
                            field: "form_name",
                            title: "Form:"
                         } ,
                         {
                             field: "type_product",
                             title: "Type"
                          } ,
                                 
                                  {
                                      field: "type_of",
                                      title: "Type of:"
                                   } ,
                               //    {
                               //        field: "modify_date",
                                //       title: "Date:"
                               //     } ,
                                    {
                                        field: "user_name",
                                        title: "User:"
                                     } ,
                                     {
                                         field: "start_date",
                                         title: "Start Date:"
                                      } ,
                                      {
                                          field: "end_date",
                                          title: "End Date"
                                       } ,
                                       {
                                           field: "status",
                                           title: "Status"
                                        } ,
                                           
                                       { command: "Delete", title: "Delete", width: "210px" }], 
                                  editable: "popup"
                    });
                });
            </script>
